<template>
  <BaseLayout>
    <template #content>
      <div v-if="userState.getUserRoles?.includes(role.audit_admin)">
        <el-table
          :data="tableData"
          border
          fit
          style="width: 100%"
        >
          <el-table-column
            prop="id"
            label="视频编号"
            align="center"
            show-overflow-tooltip
          />

          <el-table-column
            prop="userId"
            label="用户编号"
            align="center"
            show-overflow-tooltip
          />

          <el-table-column
            prop="nickname"
            label="用户名"
            align="center"
            show-overflow-tooltip
          />

          <el-table-column
            prop="title"
            label="视频标题"
            align="center"
            show-overflow-tooltip
          />

          <el-table-column
            prop="publishTime"
            label="发布时间"
            align="center"
            :formatter="formatTime"
            show-overflow-tooltip
          />

          <el-table-column
            label="操作"
            align="center"
            show-overflow-tooltip
          >
            <template #default="scope">
              <el-button
                type="primary"
                link
                @click="openDialog(scope.row)"
              >
                审核
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div v-else>
        <el-alert
          title="抱歉，您没有权限访问该页面"
          type="error"
          :closable="false"
          style="margin-bottom: 20px"
        />
      </div>

      <el-dialog
        v-model="dialogVisible"
        title="视频审核"
        width="70%"
        @close="handleDialogClose"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        align-center
      >
        <div
          ref="playerContainer"
          class="video-player"
        />

        <template #footer>
          <el-button
            type="primary"
            @click="handleResult(true)"
          >
            通过
          </el-button>

          <el-button
            type="warning"
            @click="handleResult(false)"
          >
            驳回
          </el-button>

          <el-button @click="handleDialogClose">取消</el-button>
        </template>
      </el-dialog>
    </template>
  </BaseLayout>
</template>

<script setup lang="ts">
import { useUserStoreWithOut } from '@/store/modules/user'
import { auditVideo, getAuditedVideoPage, getVideoDetail } from '@/api/video'
import { nextTick, onMounted } from 'vue'
import { IPlayerOptions } from 'xgplayer/es/player'
import Player from 'xgplayer'
import 'xgplayer/dist/index.min.css'
import HlsJsPlayer from 'xgplayer-hls'
import { role, videoStatus } from '@/utils/globalOptions'
import dayjs from 'dayjs'
import { ElMessage } from 'element-plus'
import { saveAuditVideoLog } from '@/api/videoLog'

const userState = useUserStoreWithOut()

const tableData = ref<any[]>([])
const params = reactive({
  pageNo: 1,
  pageSize: 10
})
const total = ref(0)

onMounted(async () => {
  if (userState.getUserRoles?.includes(role.audit_admin)) {
    await getAuditReportList()
  }
})

const getAuditReportList = async () => {
  const res = await getAuditedVideoPage(params)
  tableData.value = res.list
  total.value = res.total
}

const formatTime = (_row, _col, callValue) => {
  if (!callValue) {
    return ''
  }

  return callValue ? dayjs(callValue).format('YYYY-MM-DD HH:mm:ss') : '-'
}

/**
 * 视频播放器
 */
const playerContainer = ref(null)
let player = null
const video = ref(null)
const dialogVisible = ref(false)

const openDialog = async (row: any) => {
  video.value = await getVideoDetail(row.id)
  dialogVisible.value = true

  await nextTick(() => {
    if (playerContainer.value && video.value?.resource720p && video.value?.resource1080p) {
      player = new Player(<IPlayerOptions>{
        el: playerContainer.value,
        url: video.value.resource720p,
        controls: true,
        fluid: true,
        lang: 'zh-cn',
        volume: 0.6,
        pip: true,
        autoplay: false,
        plugins: [HlsJsPlayer]
      })

      player.emit('resourceReady', [
        {
          url: video.value?.resource720p,
          definition: '高清 720p'
        },
        {
          url: video.value?.resource1080p,
          definition: '超清 1080p'
        }
      ])

      if (video.value?.thumbnailUrl) {
        player.poster = video.value?.thumbnailUrl
      }
    }
  })
}

const handleDialogClose = () => {
  video.value = null
  player = null
  dialogVisible.value = false
}

const handleResult = async (isPass: boolean) => {
  if (isPass) {
    await auditVideo({
      id: video.value.id,
      status: videoStatus.PASS
    })
  } else {
    await auditVideo({
      id: video.value.id,
      status: videoStatus.REJECT
    })
  }

  await saveAuditVideoLog({
    videoId: video.value.id
  })
  await getAuditReportList()
  ElMessage.success('操作成功')
  handleDialogClose()
}
</script>

<style scoped lang="scss">
.video-player {
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  width: 100%;
}
</style>
